export default class extends React.Component {
  handler() {
    this.refs.foo.style.color = "green";
  }
  render() {
    const a = 18;
    const t = "学习jsx语法";
    const s = { color: "red", fontSize: `${a}px` };
    const c = "dd";
    const content = `<div title='动态HTML'><a href="http://baidu.com">百度一下</a></div> `; //
    // var ele = <div>再见</div>
    // const bar = (arg) => {};
    const QfBtn = qf.btn; //对象调用组件方法
    const ele = <div>再见</div>; //{ele}直接渲染数据
    const bar = (arg) => {
      //直接调用函数传参进行渲染数据
      return <h3>{arg}</h3>;
    };
    // 传数组 但null,undefined,boolean 值不渲染
    const list = [
      <div key="1">11</div>,
      <div key="2">12</div>,
      <div key="3">13</div>,
      null,
      undefined,
      true,
      false,
      "你好",
      5,
      [<div key="4">14</div>, <div key="5">15</div>],
    ];
    // 传对象,然后加个方法渲染数据，最后一定要记得return
    const user = {
      name: "张三",
      age: "30",
      gender: "男",
      address: "深圳宝安",
    };
    const renderUser = () => {
      const keys = Object.keys(user);
      let result = [];
      for (let i = 0; i < keys.length; i++) {
        const ele = (
          <div key={i}>
            {/* {keys[i]} {":"} {user[keys[i]]} */}
            {`${keys[i]}:${user[keys[i]]}`}
          </div>
        );
        result.push(ele);
      }
      return result;
    };
    const ele2 = (
      <h2>
        <span>猴赛雷</span>
      </h2>
    );
    //盲盒
    const pp = {
      href: "https://mi.com",
      title: "小米",
      className: "mi",
    };

    return (
      <div title={a} id={"box"}>
        <h3 style={s}>{t} </h3>
        <h3 className={`cc bb ${c}`}>1000</h3>
        <hr />
        <div dangerouslySetInnerHTML={{ __html: content }}></div>
        <hr />
        <h2 id="foo" ref="foo">
          你好
        </h2>
        <button onClick={this.handler.bind(this)}>操作变色</button>
        <hr />
        {ele}
        {ele2}
        {/* 灰色背景div */}
        <div style={{ height: "40px", background: "#eee" }} />
        <hr />
        <a {...pp}>盲盒</a>
        <hr />
        {/* 直接调用函数传值渲染 */}
        {bar(100)}
        <hr />
        {list}
        <hr />
        {renderUser()}
        <hr />
        <QfBtn />
        <hr />
        <Qf.Button />
        <hr />
        <Button />
        <hr />
        <NumberTip num={5}></NumberTip>
        <NumberTip num={6}></NumberTip>
        <NumberTip num={8}></NumberTip>
        <hr />
      </div>
    );
  }
}

// 函数组件：箭头函数或者直接函数组件
const Button = () => <button>点击</button>;
const Qf = {
  Button: Button,
};

const qf = {
  btn: Button,
};

//传参判断奇偶数 直接在组件中传值进行判断,显示num奇偶数情况需要加props.num
const NumberTip = (props) => {
  if (props.num % 2 === 0) {
    return <h2>{props.num}是偶数</h2>;
  } else {
    return <h2>{props.num}是奇数</h2>;
  }
};
